// ==================== 渲染引擎 (RenderEngine) ====================
// 基础设施层核心模块
// 职责：提供高效的Canvas渲染能力，实现性能优化和渲染策略

/**
 * 渲染引擎类
 * 负责管理Canvas渲染上下文，提供高性能渲染能力
 */
export class RenderEngine {
  /**
   * 构造函数
   * @param {HTMLCanvasElement} canvas - Canvas元素
   * @param {Object} options - 渲染选项
   */
  constructor(canvas, options = {}) {
    // ==================== 核心属性 ====================
    this.canvas = canvas
    this.ctx = null
    this.isInitialized = false
    
    // ==================== 渲染配置 ====================
    this.options = {
      enableHighDPI: true,           // 启用高DPI支持
      enableAntialiasing: true,      // 启用抗锯齿
      enableImageSmoothing: true,    // 启用图像平滑
      maxFPS: 60,                    // 最大帧率
      enableVSync: true,             // 启用垂直同步
      ...options
    }
    
    // ==================== 性能监控 ====================
    this.performance = {
      frameCount: 0,                 // 帧数计数
      lastFrameTime: 0,              // 上一帧时间
      averageFPS: 0,                 // 平均帧率
      renderTime: 0,                 // 渲染耗时
      memoryUsage: 0                 // 内存使用
    }
    
    // ==================== 渲染状态 ====================
    this.renderState = {
      isRendering: false,            // 是否正在渲染
      needsRedraw: true,             // 是否需要重绘
      lastRedrawTime: 0,             // 上次重绘时间
      dirtyRegions: []               // 脏区域列表
    }
    
    // ==================== 缓存系统 ====================
    this.cache = {
      offscreenCanvases: new Map(),  // 离屏Canvas缓存
      imageCache: new Map(),         // 图像缓存
      patternCache: new Map(),       // 图案缓存
      gradientCache: new Map()       // 渐变缓存
    }
    
    // ==================== 初始化 ====================
    this.initialize()
  }
  
  /**
   * 初始化渲染引擎
   * 设置Canvas上下文和渲染配置
   */
  initialize() {
    if (!this.canvas) {
      throw new Error('Canvas元素不能为空')
    }
    
    // 获取2D渲染上下文
    this.ctx = this.canvas.getContext('2d', {
      alpha: true,
      desynchronized: false,
      willReadFrequently: false
    })
    
    if (!this.ctx) {
      throw new Error('无法获取Canvas 2D上下文')
    }
    
    // 配置渲染上下文
    this.configureContext()
    
    // 设置Canvas尺寸
    this.resizeCanvas()
    
    // 绑定事件监听器
    this.bindEventListeners()
    
    this.isInitialized = true
    console.log('渲染引擎初始化完成')
  }
  
  /**
   * 配置渲染上下文
   * 设置抗锯齿、图像平滑等渲染质量选项
   */
  configureContext() {
    const ctx = this.ctx
    
    // 启用图像平滑
    if (this.options.enableImageSmoothing) {
      ctx.imageSmoothingEnabled = true
      ctx.imageSmoothingQuality = 'high'
    } else {
      ctx.imageSmoothingEnabled = false
    }
    
    // 设置合成操作
    ctx.globalCompositeOperation = 'source-over'
    
    // 设置默认样式
    ctx.lineCap = 'round'
    ctx.lineJoin = 'round'
    ctx.miterLimit = 10
  }
  
  /**
   * 调整Canvas尺寸
   * 支持高DPI显示器，确保渲染质量
   */
  resizeCanvas() {
    const canvas = this.canvas
    const rect = canvas.getBoundingClientRect()
    
    // 计算实际尺寸
    const width = rect.width
    const height = rect.height
    
    // 高DPI支持
    if (this.options.enableHighDPI && window.devicePixelRatio > 1) {
      const scale = window.devicePixelRatio
      
      // 设置Canvas的实际像素尺寸
      canvas.width = width * scale
      canvas.height = height * scale
      
      // 设置CSS尺寸
      canvas.style.width = width + 'px'
      canvas.style.height = height + 'px'
      
      // 缩放上下文以匹配设备像素比
      this.ctx.scale(scale, scale)
    } else {
      // 标准分辨率
      canvas.width = width
      canvas.height = height
    }
    
    // 通知尺寸变化
    this.onResize(width, height)
  }
  
  /**
   * 绑定事件监听器
   * 监听窗口大小变化等事件
   */
  bindEventListeners() {
    // 窗口大小变化监听
    this.resizeHandler = this.resizeCanvas.bind(this)
    window.addEventListener('resize', this.resizeHandler)
    
    // 设备方向变化监听
    window.addEventListener('orientationchange', this.resizeHandler)
  }
  
  /**
   * 开始渲染循环
   * 启动高性能渲染循环
   */
  startRenderLoop() {
    if (this.renderState.isRendering) {
      return
    }
    
    this.renderState.isRendering = true
    this.renderLoop()
  }
  
  /**
   * 停止渲染循环
   * 停止渲染循环，释放资源
   */
  stopRenderLoop() {
    this.renderState.isRendering = false
  }
  
  /**
   * 渲染循环
   * 主渲染循环，控制帧率和性能
   */
  renderLoop() {
    if (!this.renderState.isRendering) {
      return
    }
    
    const currentTime = performance.now()
    const deltaTime = currentTime - this.performance.lastFrameTime
    const targetFrameTime = 1000 / this.options.maxFPS
    
    // 帧率控制
    if (deltaTime >= targetFrameTime) {
      this.render()
      this.performance.lastFrameTime = currentTime
      this.performance.frameCount++
    }
    
    // 继续下一帧
    if (this.options.enableVSync) {
      requestAnimationFrame(() => this.renderLoop())
    } else {
      setTimeout(() => this.renderLoop(), targetFrameTime)
    }
  }
  
  /**
   * 执行渲染
   * 核心渲染方法，执行实际的绘制操作
   */
  render() {
    if (!this.isInitialized || !this.ctx) {
      return
    }
    
    const startTime = performance.now()
    
    // 清空画布
    this.clear()
    
    // 应用变换
    this.applyTransform()
    
    // 执行渲染回调
    if (this.onRender) {
      this.onRender(this.ctx)
    }
    
    // 恢复变换
    this.restoreTransform()
    
    // 更新性能统计
    this.updatePerformance(startTime)
    
    // 标记已渲染
    this.renderState.needsRedraw = false
    this.renderState.lastRedrawTime = performance.now()
  }
  
  /**
   * 清空画布
   * 清除整个Canvas内容
   */
  clear() {
    const ctx = this.ctx
    ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
  }
  
  /**
   * 应用变换
   * 应用视口变换（平移、缩放、旋转）
   */
  applyTransform() {
    if (this.currentTransform) {
      const ctx = this.ctx
      ctx.save()
      ctx.translate(this.currentTransform.x, this.currentTransform.y)
      ctx.scale(this.currentTransform.scaleX, this.currentTransform.scaleY)
      ctx.rotate(this.currentTransform.rotation)
    }
  }
  
  /**
   * 恢复变换
   * 恢复Canvas变换状态
   */
  restoreTransform() {
    if (this.currentTransform) {
      this.ctx.restore()
    }
  }
  
  /**
   * 设置变换
   * @param {Object} transform - 变换对象
   */
  setTransform(transform) {
    this.currentTransform = transform
    this.markDirty()
  }
  
  /**
   * 标记需要重绘
   * 通知渲染引擎需要重新渲染
   */
  markDirty() {
    this.renderState.needsRedraw = true
  }
  
  /**
   * 更新性能统计
   * @param {number} startTime - 渲染开始时间
   */
  updatePerformance(startTime) {
    const endTime = performance.now()
    this.performance.renderTime = endTime - startTime
    
    // 计算平均帧率
    if (this.performance.frameCount > 0) {
      const totalTime = endTime - this.performance.lastFrameTime
      this.performance.averageFPS = 1000 / (totalTime / this.performance.frameCount)
    }
  }
  
  /**
   * 清理资源
   * 释放所有缓存和事件监听器
   */
  cleanup() {
    // 停止渲染循环
    this.stopRenderLoop()
    
    // 移除事件监听器
    if (this.resizeHandler) {
      window.removeEventListener('resize', this.resizeHandler)
      window.removeEventListener('orientationchange', this.resizeHandler)
    }
    
    // 清理缓存
    this.cache.offscreenCanvases.clear()
    this.cache.imageCache.clear()
    this.cache.patternCache.clear()
    this.cache.gradientCache.clear()
    
    // 清理Canvas
    if (this.ctx) {
      this.clear()
    }
    
    this.isInitialized = false
    console.log('渲染引擎已清理')
  }
  
  /**
   * 尺寸变化回调
   * @param {number} width - 新宽度
   * @param {number} height - 新高度
   */
  onResize(width, height) {
    console.log(`Canvas尺寸变化: ${width}x${height}`)
  }
  
  /**
   * 渲染回调
   * @param {CanvasRenderingContext2D} ctx - 渲染上下文
   */
  onRender(ctx) {
    // 子类可以重写此方法
  }
}